<template>
    <div>
        <div class="container">
            <!-- 导航栏 -->
    <van-nav-bar
  title="优惠券"
  left-arrow
  @click-left="onClickLeft"
/></div>
<div class="li">
    <!-- 优惠券单元格 -->
<!-- 优惠券列表 -->
<van-coupon-list
  :coupons="coupons"
  :chosen-coupon="chosenCoupon"
  :disabled-coupons="disabledCoupons"
  @change="onChange"
  @exchange="onExchange"
/>
</div>
    </div>
</template>

<script>
 import '@/assets/css/reset.css'
import '@/assets/css/base.css'
import { onMounted, ref, reactive } from 'vue'

export default {
  setup() {
    // 导航栏
const onClickLeft = () => history.back();
    const coupon = {
      available: 1,
      condition: '无门槛\n最多优惠20元',
      reason: '',
      value: 150,
      name: '优惠券名称',
      startAt: 1489104000,
      endAt: 1514592000,
      valueDesc: '20',
      unitDesc: '元',
    };

    const coupons = ref([coupon]);
    const showList = ref(true);
    const chosenCoupon = ref(-1);
    

    const onChange = (index) => {
      showList.value = true;
      chosenCoupon.value = index;
    };
    const onExchange = (code) => {
      
    };

    return {
        onClickLeft,
      coupons,
      showList,
      onChange,
      onExchange,
      chosenCoupon,
      disabledCoupons: [coupon],
    };
  },
};

</script>

<style>
.container {
    background-color: var(--color-grey-three);
    --van-nav-bar-background: var(--color-primary);
    --van-nav-bar-text-color: var(--color-white);
}
.li{
    background-color: bisque;
}
.van-coupon__head{
  color: #ff6a00;

}
</style>